<template>
	<pannel style="height: 400px" @reback="reback">
		<div class="list flex-1">
			<div>
				<div
					class="item flex flex-align-center"
					:class="{ checked: item.checked }"
					v-for="(item, index) in list"
					:key="index"
					@click="checkStu(item, index)"
				>
					<div
						class="circle"
						:class="{
							red: !machineData || machineData.online != 1 || item.status == '0',
							dot: machineData && machineData.online == 1 && item.status == '1',
						}"
					></div>
					<span class="name">{{ item.studName }}</span>
					<!-- <div class="number">答题器ID:{{ item.machineId }}</div> -->
				</div>
			</div>
		</div>
	</pannel>
</template>

<script>
import pannel from './pannel.vue';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
	components: { pannel },
	data() {
		return {
			list: [],
		};
	},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
	},
	computed: {
		...mapState({
			studentList: (state) => state.websockStore.studentList,
		}),
	},
	watch: {
		studentList: {
			handler(newValue, oldValue) {
				console.log('12', 333);
				if (newValue != oldValue) {
					this.list = newValue.map((item) => {
						return {
							...item,
							checked: false,
						};
					});
				}
			},
			deep: true,
			immediate: true,
		},
	},
	methods: {
		checkStu(item, index) {
			if (this.machineData && this.machineData.online == 1 && item.status == '1') {
				item.checked = !item.checked;
			}
		},
		getStuList() {
			let list=this.list.filter((item) => item.checked).map((item) => item.studId)
			console.log('list',list)
			return list;
		},
		reback(){
			this.$emit('reback')
		}
	},
};
</script>

<style scoped lang="less">
.list {
	padding: 20px;
	.item {
		width: 20%;
		display: inline-block;
		cursor: pointer;
		text-align: left;
		margin-bottom: 16px;
		.name {
			//margin-right: 18px;
			width: 5em;
			display: inline-block;
			text-align: left;
			word-break: break-all;
			vertical-align: middle;
			margin-right: 10px;
		}

		.circle {
			width: 18px;
			height: 18px;
			border-radius: 100%;
			background: rgb(255, 255, 255);
			border: 1px solid @primary-color;
			margin-right: 10px;
			display: inline-block;
			vertical-align: middle;
			position: relative;
			//margin-top: -5px;

			&.red {
				border: 1px solid rgb(230, 67, 67);
				// background: rgb(230, 67, 67);
				cursor: pointer;
			}
			&.dot {
				// background: @primary-color;
				border: 1px solid @primary-color;
			}
		}

		.icon {
			width: 24px;
			height: 24px;
			margin-left: 18px;
		}

		.number {
			display: inline-block;
			width: 12em;
			text-align: left;
			vertical-align: middle;
		}

		&.checked {
			.circle {
				&::after {
					position: absolute;
					top: 40%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(-45deg);
					content: '';
					width: 12px;
					height: 8px;
					border: 2px solid transparent;
					border-left-color: @primary-color;
					border-bottom-color: @primary-color;
				}
			}
		}
	}
}
</style>
